<template>
	<div class="stockCost">
		<div class="table">
			<div class="tr">
				<div class="td">
					<span>交易方式</span>
				</div>
				<div class="td">
					<el-radio-group v-model="model" size="mini" @change="count()">
						<el-radio-button label="买入"></el-radio-button>
						<el-radio-button label="卖出"></el-radio-button>
					</el-radio-group>
				</div>
			</div>
			<div class="tr">
				<div class="td">
					<span>原成本</span>
				</div>
				<div class="td">
					<el-input v-model="sourceCost" @input="initCostCount()" placeholder="请输入" maxlength="12" size="small"></el-input>
				</div>
			</div>
			<div class="tr">
				<div class="td">
					<span>剩余成本</span>
				</div>
				<div class="td">
					<el-input v-model="residueCost" @input="initCostCount()" placeholder="请输入" maxlength="12" size="small"></el-input>
				</div>
			</div>
			<div class="tr">
				<div class="td">
					<span>初始成本</span>
				</div>
				<div class="td">
					<el-input v-model="initCost" @input="count()" placeholder="请输入" maxlength="12" size="small"></el-input>
				</div>
			</div>
			<div class="tr">
				<div class="td">
					<span>初始股数</span>
				</div>
				<div class="td">
					<el-input v-model.number="initQuantity" @input="count()" placeholder="请输入" maxlength="12" size="small"></el-input>
				</div>
				<div class="td">
					<el-radio-group v-model="initQuantityUnit" size="mini" @change="count()">
						<el-radio-button label="手"></el-radio-button>
						<el-radio-button label="股"></el-radio-button>
					</el-radio-group>
				</div>
			</div>
			<div class="tr">
				<div class="td">
					<span>初始金额</span>
				</div>
				<div class="td">
					{{initMoney}}
				</div>
			</div>
			<div class="tr">
				<div class="td">
					<span v-if="model=='买入'">买入价格</span>
					<span v-if="model=='卖出'">卖出价格</span>
				</div>
				<div class="td">
					<el-input v-model="stockPrice" @input="count()" placeholder="请输入" maxlength="12" size="small"></el-input>
				</div>
			</div>
			<div class="tr">
				<div class="td">
					<span v-if="model=='买入'">买入数量</span>
					<span v-if="model=='卖出'">卖出数量</span>
				</div>
				<div class="td">
					<el-input v-model.number="stockQuantity" @input="count()" placeholder="请输入" maxlength="12" size="small"></el-input>
				</div>
				<div class="td">
					<el-radio-group v-model="stockQuantityUnit" size="mini" @change="count()">
						<el-radio-button label="手"></el-radio-button>
						<el-radio-button label="股"></el-radio-button>
					</el-radio-group>
				</div>
			</div>
			<div class="tr" v-if="model=='买入'">
				<div class="td">
					<span>所需金额</span>
				</div>
				<div class="td">
					{{stockMoney}}
				</div>
			</div>
			<div class="tr">
				<div class="td">
					<span>手续费率</span>
				</div>
				<div class="td">
					<el-input v-model.number="serviceFeeRate" @input="count()" placeholder="请输入" maxlength="12" size="small"></el-input>
				</div>
				<div class="td">
					<el-button type="text" size="mini" @click="detailSign=!detailSign">详细</el-button>
				</div>
			</div>
			<div class="tr" v-if="detailSign">
				<div class="td">
					<span>手续费</span>
				</div>
				<div class="td" style="color: red;">
					{{serviceFee}}
				</div>
			</div>
			<div class="tr" v-if="detailSign">
				<div class="td">
					<span>过户费率</span>
				</div>
				<div class="td">
					<el-input v-model.number="transferFeeRate" @input="count()" placeholder="请输入" maxlength="12" size="small"></el-input>
				</div>
			</div>
			<div class="tr" v-if="detailSign">
				<div class="td">
					<span>过户费</span>
				</div>
				<div class="td" style="color: red;">
					{{transferFee}}
				</div>
			</div>
			<div class="tr" v-if="detailSign">
				<div class="td">
					<span>印花税率</span>
				</div>
				<div class="td">
					<el-input v-model.number="stampTaxRate" @input="count()" placeholder="请输入" maxlength="12" size="small"></el-input>
				</div>
			</div>
			<div class="tr" v-show="model=='卖出' && detailSign">
				<div class="td">
					<span>印花税</span>
				</div>
				<div class="td" style="color: red;">
					{{stampTax}}
				</div>
			</div>
			<div class="tr" v-if="model=='卖出'">
				<div class="td">
					<span>卖出获得</span>
				</div>
				<div class="td">
					{{gainMoney}}
				</div>
			</div>
			<div class="tr">
				<div class="td">
					<el-divider></el-divider>
				</div>
				<div class="td">
					<el-divider></el-divider>
				</div>
				<div class="td">
					<el-divider></el-divider>
				</div>
			</div>
			
			<div class="tr">
				<div class="td">
					<span>最终股本</span>
				</div>
				<div class="td">
					{{resultCost}}
				</div>
			</div>
			<div class="tr">
				<div class="td">
					<span>最终股数</span>
				</div>
				<div class="td">
					{{resQuantity}}
				</div>
			</div>
			<div class="tr">
				<div class="td">
					<span>最终成本</span>
				</div>
				<div class="td">
					{{resMoney}}
				</div>
			</div>
			<div class="tr" v-if="model=='买入'">
				<div class="td">
					<span>保本卖出价</span>
				</div>
				<div class="td">
					{{suggestBuyPrice}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				model: '买入',
				initCost: 0,
				initQuantity: 0,
				initQuantityUnit: '股',
				stockPrice: 0,
				stockQuantity: 0,
				stockQuantityUnit: '股',
				serviceFeeRate: 0.00025,
				transferFeeRate: 0.00001,
				stampTaxRate: 0.001,
				gainMoney: 0,
				resMoney: 0,
				resultCost: 0,
				suggestBuyPrice: 0,
				detailSign: false,
				sourceCost:0,
				residueCost:0,
			}
		},
		computed: {
			initQuantitys(){
				if(this.initQuantityUnit == '股'){
					return this.initQuantity;
				}else if(this.initQuantityUnit == '手'){
					return this.initQuantity*100;
				}
			},
			stockQuantitys(){
				if(this.stockQuantityUnit == '股'){
					return this.stockQuantity;
				}else if(this.stockQuantityUnit == '手'){
					return this.stockQuantity*100;
				}
			},
			
			serviceFee(){
				//手续费 = （股票价格*股票数量）* 手续费率
				let res = (this.stockPrice * this.stockQuantitys) * this.serviceFeeRate;
				if(res > 5){
					return this.approach(res,1000);
				}else{
					return 5;
				}
			},
			transferFee(){
				//过户费 = （股票价格*股票数量）* 过户费率
				let res = (this.stockPrice * this.stockQuantitys) * this.transferFeeRate;
				return this.approach(res,100);
			},
			stampTax(){
				//印花税 = （股票价格*股票数量）* 印花税率
				let res = (this.stockPrice * this.stockQuantitys) * this.stampTaxRate;
				return this.approach(res,100);
			},
			resQuantity(){
				if(this.model=='买入'){
					//股票数量 =（初始数量 + 买入数量）
					return this.initQuantitys + this.stockQuantitys;
				}else if(this.model=='卖出'){
					//股票数量 =（初始数量 - 买入数量）
					return this.initQuantitys - this.stockQuantitys;
				}
			},
			
			initMoney(){
				let initMoney;
				if(this.initQuantitys==0){
					// 初始数量为0时, 初始金额 = 初始成本
					initMoney = this.initCost;
				}else{
					//初始金额 = 初始成本*初始数量
					initMoney = this.initCost * this.initQuantitys;
				}
				return this.approach(initMoney,1000);
			},
			stockMoney(){
				//股票价值 = 股票价格*股票数量
				let stockMoney = this.stockPrice * this.stockQuantitys;
				return this.approach(stockMoney,1000);
			},
		},
		methods: {
			initCostCount(){
				if(this.sourceCost!=0){
					this.initCost = this.approach(this.sourceCost - this.residueCost,100);
				}
			},
			count(){
				if(this.model=="买入"){
					if(this.stockQuantitys==0){
						//最终成本 = （（初始成本*初始数量）
						this.resMoney = this.initMoney;
						//最终股本 = 初始数量
						this.resultCost = this.initCost;
					}else if(this.resQuantity>0){
						//最终成本 = （（初始成本*初始数量） +（股票价格*股票数量）+ 手续费 + 过户费）
						this.resMoney = this.initMoney + this.stockMoney + this.buyCharge(this.stockMoney);
						//最终股本 = （（初始成本*初始数量） +（股票价格*股票数量）+ 手续费 + 过户费）/ （初始数量+买入数量）
						this.resultCost = this.resMoney / this.resQuantity;
					}else{
						this.resultCost = 0;
					}
					
					if(this.stockMoney>0){
						//保本卖出价格 = 成本价 + 卖出手续费
						this.buyPrice(this.resultCost, this.initQuantitys + this.stockQuantitys, 0.01);
					}else{
						this.suggestBuyPrice = 0;
					}
					//四舍五入
					this.suggestBuyPrice = this.approach(this.suggestBuyPrice,1000);
				}else if(this.model=="卖出"){
					if(this.stockMoney==0){
						this.gainMoney = 0;
					}else{
						//卖出获得 = （股票价格*股票数量）- 手续费 - 印花税 - 过户费
						this.gainMoney = this.stockMoney - this.saleCharge(this.stockMoney);
					}
					
					//最终成本 = （初始成本*初始数量） -（（股票价格*股票数量）- 手续费 - 印花税 - 过户费）
					this.resMoney = this.initMoney - this.gainMoney;
					
					if(this.stockQuantitys==0){
						//最终股本 = 初始数量
						this.resultCost = this.initCost;
					}else if(this.resQuantity>0){
						//最终股本 = （（初始成本*初始数量） -（（卖出价格*卖出数量）- 手续费 - 印花税 - 过户费））/ （初始数量-卖出数量）
						this.resultCost = this.resMoney / this.resQuantity;
					}else{
						this.resultCost = 0;
					}
					//四舍五入
					this.gainMoney = this.approach(this.gainMoney,1000);
				}
				//四舍五入
				this.resMoney = this.approach(this.resMoney,1000);
				this.resultCost = this.approach(this.resultCost,1000);
			},
			//买入手续费 = 手续费(万分之2.5) + 过户费(万分之0.1)
			buyCharge(stockMoney){
				return this.serviceFee + this.transferFee;
			},
			//卖出手续费 = 手续费(万分之2.5) + 过户费(万分之0.1) + 印花税(千分1)
			saleCharge(stockMoney){
				return this.serviceFee + this.transferFee + this.stampTax;
			},
			//保本卖出价格 = 成本价 + 卖出手续费
			buyPrice(stockMoney, stockQuantitys, increment){
				let totalMoney = stockMoney * stockQuantitys;
				let saleMoney = (stockMoney + increment) * stockQuantitys;
				console.log(totalMoney+","+saleMoney+","+this.saleCharge(saleMoney));
				if((saleMoney - totalMoney)>= this.saleCharge(saleMoney)){
					this.suggestBuyPrice = saleMoney/stockQuantitys;
				}else{
					this.buyPrice(stockMoney, stockQuantitys, increment+0.01);
				}
			},
		},
	}
</script>

<style scoped>
	.stockCost .table {
		display: table;
		text-align: left;
	}
	.stockCost .table .tr{
		display: table-row;
	}
	.stockCost .table .td{
		display: table-cell;
		height: 33px;
		padding-bottom: 2px;
		vertical-align: middle;
	}
	
	@media screen and (min-width: 1200px){
		.stockCost .table .td:nth-of-type(1){
			width: 180px;
		}
		.stockCost .table .td:nth-of-type(2){
			width: 200px;
		}
	}
	@media screen and (max-width: 1200px){
		.stockCost .table .td:nth-of-type(1){
			width: 180px;
		}
		.stockCost .table .td:nth-of-type(2){
			width: 200px;
		}
	}
	@media screen and (max-width: 767px){
		.stockCost .table .td:nth-of-type(1){
			width: 95px;
		}
		.stockCost .table .td:nth-of-type(2){
			width: 150px;
		}
	}
	@media screen and (max-width: 405px){
		.stockCost .table .td:nth-of-type(1){
			width: 95px;
		}
		.stockCost .table .td:nth-of-type(2){
			width: 150px;
		}
	}
</style>
